<!--  -->
<template>
  <div class="seller-wrap">
    <div class="seller">
       <div class="seller-info">
         <div class="info-top border-1px">
           <div class="title">
             <div class="name">{{ seller.name }}</div>
             <div class="desc">
               <v-star :size="36" :score="seller.score" :mr="true"></v-star><span class="commentCount">(661)</span><span class="sellCount">月售{{ seller.sellCount }}</span>
             </div>
           </div>
           <div class="collect">
             <i class="icon-favorite" @click="collect" :class="{'active':favorite}"></i>
             <div class="words">{{ favoriteTest }}</div>
           </div>
         </div>
         <div class="info-bottom">
            <div class="minPrice border-right-1px">
              <h3 class="wordbar">起送价</h3>
              <p class="content"><span class="data">{{ seller.minPrice }}</span><span class="unit">元</span></p>
            </div>
            <div class="deliveryPrice border-right-1px">
              <h3 class="wordbar">商家配送</h3>
              <p class="content"><span class="data">{{ seller.deliveryPrice }}</span><span class="unit">元</span></p>
            </div>
            <div class="deliveryTime">
              <h3 class="wordbar">平均配送时间</h3>
              <p class="content"><span class="data">{{ seller.deliveryTime }}</span><span class="unit">分钟</span></p>
            </div>
         </div>
       </div>
       <split></split>
       <!-- 公告与活动 -->
       <div class="activities">
         <div class="bulletin border-1px">
           <div class="title">公告与活动</div>
           <p class="content">{{ seller.bulletin }}</p>
         </div>
         <ul class="support">
           <li v-for="(item,i) in seller.supports" :key="i" class="item border-1px">
             <i class="icon" :class="classMap[seller.supports[i].type]"></i><span class="support-desc">{{ item.description }}</span>
           </li>
         </ul>
       </div>
       <split></split>
       <!-- 商家实景 -->
       <div class="scene">
         <div class="title">商家实景</div>
         <div class="picture-wrap">
           <ul class="picture" ref="picList">
            <li v-for="item in seller.pics" :key="item" class="pic">
              <img :src="item"/>
            </li>
          </ul>
         </div>
       </div>
       <split></split>
       <div class="seller-infos">
         <div class="title border-1px">商家信息</div>
         <p class="desc border-1px" v-for="(item,i) in seller.infos" :key="i">{{ item }}</p>
       </div>
    </div>
  </div>
</template>
<script>
import star from "../star/star";
import split from "../split/split";
import { saveToLocal, loadFromLocal } from "../../common/js/localstore.js";
import BScroll from "better-scroll";
export default {
  data() {
    return {
      favorite: (() => {
        return loadFromLocal(this.seller.id, "favorite", false);
      })(),
      classMap: ["decrease", "discount", "special", "invoice", "guarantee"]
    };
  },
  methods: {
    // 收藏店铺,切换状态
    collect() {
      this.favorite = !this.favorite;
      saveToLocal(this.seller.id, "favorite", this.favorite);
    },
    _initScroll() {
      this.sellerScroll = new BScroll(".seller-wrap", {
        click: true
      });
      this.picsScroll = new BScroll(".picture-wrap", {
        click: true,
        scrollX: true,
        eventPassthrough: 'vertical'
      });
    }
  },
  props: ["seller"],
  components: {
    "v-star": star,
    split
  },
  computed: {
    // 根据favorite 收藏文本的切换
    favoriteTest() {
      return this.favorite ? "已收藏" : "未收藏";
    }
  },
  created() {
    this.$nextTick(() => {
      if (this.seller.pics) {
        let picWidth = 120;
        let margin = 6;
        let width = (picWidth + margin) * this.seller.pics.length - margin;
        this.$refs.picList.style.width = width + "px";
      }
      this._initScroll();
    });
  }
};
</script>
<style lang='less' scoped>
@import "../../common/css/common.less";
.seller-wrap {
  position: absolute;
  top: 174px;
  bottom: 0;
  overflow: hidden;
  margin-bottom: 46px;
  width: 100%;
  .seller {
    .seller-info {
      margin: 0 18px;
      .info-top {
        padding: 18px 0;
        .border-1px();
        display: flex;
        justify-content: space-between;
        .title {
          .name {
            .font-style(14px,14px);
            color: rgb(7, 17, 27);
            margin-bottom: 8px;
          }
          .desc {
            .commentCount {
              margin: 0 12px 0 8px;
            }
            .sellCount,
            .commentCount {
              .font-style(10px,18px);
              color: rgb(77, 85, 93);
            }
          }
        }
        .collect {
          text-align: center;
          .icon-favorite {
            .font-style(24px,24px);
            color: silver;
            &.active {
              color: rgb(240, 20, 20);
            }
          }
          .words {
            margin-top: 4px;
            .font-style(10px,10px);
            color: rgb(77, 85, 93);
          }
        }
      }
      .info-bottom {
        margin: 18px 0;
        display: flex;
        justify-content: space-around;
        text-align: center;
        .minPrice,
        .deliveryPrice,
        .deliveryTime {
          flex: 1;
          .wordbar {
            margin-bottom: 4px;
            .font-style(10px,10px,normal);
            color: rgb(147, 153, 159);
          }
          .content {
            .data {
              .font-style(24px,24px,200);
              color: rgb(7, 17, 27);
            }
            .unit {
              font-size: 10px;
            }
          }
        }
        .minPrice,
        .deliveryPrice {
          .border-right-1px();
        }
      }
    }
    .activities {
      margin: 0 18px;
      .bulletin {
        padding: 18px 0;
        .border-1px();
        .title {
          .font-style(14px,14px);
          color: rgb(7, 17, 27);
          margin-bottom: 8px;
        }
        .content {
          padding: 6px 12px;
          .font-style(12px,24px,200);
          color: rgb(240, 20, 20);
        }
      }
      .support {
        .item {
          padding: 16px 12px;
          .border-1px();
          &:last-child {
            &::after {
              border-top: none;
            }
          }
          .support-desc {
            .font-style(12px,16px,200);
            color: rgb(7, 17, 27);
          }
          .icon {
            display: inline-block;
            width: 16px;
            height: 16px;
            margin-right: 6px;
            vertical-align: bottom;
            background-size: 16px 16px;
            &.decrease {
              .bg-image("decrease_4");
            }
            &.discount {
              .bg-image("discount_4");
            }
            &.guarantee {
              .bg-image("guarantee_4");
            }
            &.invoice {
              .bg-image("invoice_4");
            }
            &.special {
              .bg-image("special_4");
            }
          }
        }
      }
    }
    .scene {
      padding: 18px;
      .title {
        .font-style(14px,14px);
        color: rgb(7, 17, 27);
        margin-bottom: 12px;
      }
      .picture-wrap {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        .picture {
          font-size: 0;
          .pic {
            display: inline-block;
            width: 120px;
            height: 90px;
            margin-right: 6px;
            &:last-child {
              margin-right: 0;
            }
            img {
              width: 120px;
              height: 90px;
            }
          }
        }
      }
    }
    .seller-infos {
      padding: 18px 18px 0;
      .title {
        .font-style(14px,14px);
        color: rgb(7, 17, 27);
        padding-bottom: 12px;
        .border-1px();
      }
      .desc {
        padding: 16px 12px;
        .font-style(12px,16px,200);
        .border-1px();
        &:last-child {
          &::after {
            border-top: none;
          }
        }
      }
    }
  }
}
</style>